<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix">
    <span>对接系统</span>

    <el-button type="text" style="float: right; padding: 3px 0"
     @click="addDockingSystem">添加一个对接系统</el-button>
</div>
	
	  <el-table
	    :data="companyDockingSystem"
	    border
	    v-loading="isloading"
	    style="width: 100%">
	    <el-table-column
	      prop="docking_system_name"
	      label="系统名称"
	      width="300">
	    </el-table-column>
	    <el-table-column
	      label="所需参数"
	      width="500">
	      <template slot-scope="scope">
	      		<div
	      		v-for="item in scope.row.ps"
	      		>
	      			{{item.k}} : {{item.v}}
	      		</div>
	      </template>
	    </el-table-column>
	    <el-table-column
	      label="操作">
	      	<template slot-scope="scope">
	      		<el-button type="primary" size="mini" 
	      		@click="setDockingParameter(scope.row)">设置对接参数</el-button>
	      	</template>
	    </el-table-column>
	  </el-table>

</el-card>  


<el-dialog
  title="对接系统"
  :visible.sync="dockingSystemDialogVisible"
  width="70%">
  	  <el-table
	    :data="dockingSystem"
	    border
	    style="width: 100%">
	    <el-table-column
	      prop="docking_system_name"
	      label="系统名称"
	      width="300">
	    </el-table-column>
	    <el-table-column
	      label="所需参数"
	      width="400">
	      <template slot-scope="scope">
	      	{{scope.row.docking_system_params}}
	      </template>
	    </el-table-column>
	    <el-table-column
	      label="操作">
	      <template slot-scope="scope">
	      	<span v-if="scope.row.has == '1'">已添加</span>
	      	<el-button type="primary" size="mini" 
	      	v-else
	      	@click="add(scope.row)" >添加</el-button>
	      </template>
	    </el-table-column>
	  </el-table>
</el-dialog>	



<el-dialog
  :title="currentDockingSystem.docking_system_name"
  :visible.sync="dockingParamterDialogVisible"
  width="70%">
  	<el-form 
		:model="dockingParamterForm" 
		label-width="300px"
		>
		<el-form-item
		v-for="item in paramters"
		 :label="item + ' : '" >
			<el-input v-model="dockingParamterForm[item]" style="width:300px;">
		    </el-input>
		</el-form-item>

		<el-form-item label="参数说明 : " >
			<span class="red" 
			v-html="currentDockingSystem.docking_system_params_remark"></span>
		</el-form-item>

	</el-form>	
  <span slot="footer" class="dialog-footer">
    <el-button @click="dockingParamterDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveDockingParamter(dockingParamterForm)">保 存</el-button>
  </span>
</el-dialog>

</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'dockingparams',
	
	data () {
		return {
		  	companyDockingSystem : [],
		  	dockingSystem : [],

		  	isloading : true,

		  	dockingSystemDialogVisible : false,
		  	dockingParamterDialogVisible : false,

		  	currentDockingSystem : {},
		  	//dockingParamterForm : {},
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			'userInfo',
		]),


		paramters () {
			if(this.currentDockingSystem.docking_params == undefined){
				return [];
			}

			return this.currentDockingSystem.docking_params.split(',');
		},


		dockingParamterForm () {
			if(this.currentDockingSystem.docking_system_params == undefined){
				return {};
			}
			return JSON.parse(this.currentDockingSystem.docking_system_params);
		}
	},

	methods : {
		init () {
			const para = {
				fun : 'companyDockingSystem',
				cb : res => {
					console.log(res);
					this.companyDockingSystem = res;

					this.companyDockingSystem.forEach(item => {
						console.log(item);
						item['ps'] = [];
						if(item.docking_system_params != undefined){
							let tmp = JSON.parse(item.docking_system_params);

							Object.keys(tmp).forEach(k => {
								item.ps.push({k, 'v' : tmp[k]});
							});
						}
					});

					this.isloading = false;
				},
				err : res => {
					this.$notify.error({
						title : '失败',
						message : res,
					});
					this.isloading = false;
				}
			};
			this.$store.dispatch('update', para);
		},

		addDockingSystem () {

			const para = {
				fun : 'dockingSystem',
				cb : res => {
					console.log(res);
					this.dockingSystem = res;

					for(let i = 0; i < this.dockingSystem.length; i++){
						let tmp = this.dockingSystem[i];
						for(let j = 0; j < this.companyDockingSystem.length; j++){
							let tmp1 = this.companyDockingSystem[j];
							if(tmp1.docking_system_id == tmp.docking_system_id){
								tmp['has'] = '1';
								break;
							}
						}
					}

					this.dockingSystemDialogVisible = true;
				},
				err : res => {
					this.$notify.error({
						title : '失败',
						message : res,
					});
				}
			};
			this.$store.dispatch('update', para);

			
		},

		add (item) {
			const para = {
				fun : 'addCompanyDockindSystem',
				company_code : this.userInfo.company_code,
				docking_system_id : item.docking_system_id,
				state : '1',
				cb : res => {
					console.log(res);
					this.$notify.success({
						title : '成功',
						message : '添加成功',
					});
					this.dockingSystemDialogVisible = false;
					this.init();
				},
				err : res => {
					this.$notify.error({
						title : '失败',
						message : res,
					});
				}
			};
			this.$store.dispatch('update', para);
		},

		setDockingParameter (item) {
			this.currentDockingSystem = item;
			this.dockingParamterDialogVisible = true;
		},

		saveDockingParamter (item) {
			console.log(item);
			const para = {
				fun : 'updateCompanyDockindParamter',
				id : this.currentDockingSystem.id,
				docking_system_id : this.currentDockingSystem.docking_system_id,
				docking_system_params : JSON.stringify(item),
				cb : res => {
					this.$notify.success({
						title : '成功',
						message : '保存成功',
					});
					this.init();
					this.dockingParamterDialogVisible = false;
				},
				err : res => {
					this.$notify.error({
						title : '保存失败',
						message : res,
					});
				}
			};
			this.$store.dispatch('update', para);
		},
		
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
